<template>
  <div>
    <p>pageRoute：#/vueObservable</p>
    <p>
      使用场景：在非父子组件通信时，可以使用通常的bus或者使用vuex，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。这时，observable就是一个很好的选择
    </p>
    <br />
    this.age1 : {{ age1 }} <br />
    this.age2 : {{ age2 }}
    <hr />
    <br />
    <p style="color: red">这个使用手法没有必要</p>
    <div>vueObservable.age: {{ vueObservable.age }}</div>
    <button @click="() => changeVueObservableAge(20)">变成20</button>
    <div>vueObservable.name: {{ vueObservable.name }}</div>
    <button @click="() => changeVueObservableName('andy')">变成andy</button>
    <br />
    <br />
    <hr />
    <br />
    <div>vuex中 userinfo.age:{{ userinfo.age }}</div>
    <button @click="() => changeUserInfoAge(3)">变成3</button>
    <div>vuex中 userinfo.name:{{ userinfo.name }}</div>
    <button @click="() => changeUserInfoName('Tom')">变成Tom</button>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapState } from 'vuex'

export default {
  name: 'VueObservable',
  components: {},
  data() {
    return {
      num: 10
    }
  },
  methods: {
    ...mapMutations([
      'changeVueObservableName',
      'changeVueObservableAge',
      'changeUserInfoName',
      'changeUserInfoAge'
    ])
  },
  computed: {
    ...mapState({
      // 箭头函数可使代码更简练
      vueObservable: (state) => state.vueObservable,
      userinfo: (state) => state.userinfo,

      // 为了能够使用 `this` 获取局部状态，必须使用常规函数
      age1(state) {
        return state.vueObservable.age + this.num
      },
      age2(state) {
        return state.userinfo.age + this.num
      }
    })
  },
  activated: {},
  deactivated: {}
}
</script>
<style lang="less" scoped></style>
